<template>
  <div>
    <fish-row>
      <fish-col span="24" class="demo-col">col-24</fish-col>
    </fish-row>
    <fish-row>
      <fish-col span="12" class="demo-col">col-12</fish-col>
      <fish-col span="12" class="demo-col demo-col2">col-12</fish-col>
    </fish-row>
    <fish-row>
      <fish-col span="8" class="demo-col">col-8</fish-col>
      <fish-col span="8" class="demo-col demo-col2">col-8</fish-col>
      <fish-col span="8" class="demo-col">col-8</fish-col>
    </fish-row>
    <fish-row>
      <fish-col span="6" class="demo-col">col-6</fish-col>
      <fish-col span="6" class="demo-col demo-col2">col-6</fish-col>
      <fish-col span="6" class="demo-col">col-6</fish-col>
      <fish-col span="6" class="demo-col demo-col2">col-6</fish-col>
    </fish-row>
    <fish-row>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
      <fish-col span="1" class="demo-col">col-1</fish-col>
      <fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
    </fish-row>
  </div>
</template>
<script>
  export default {
    name: 'demo-grid-base'
  }
</script>
<style>
  .demo-col {
    background: #e0f0fa;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 5px;
  }

  .demo-col2 {
    background: #7dbcea;
  }

</style>